<template>
  <div class="areaCode-content">
    <!-- 区号展示 -->
    <div class="area-code" @click="openAreaCode(true)">
      <span>+{{ currentArea.nation_code }}</span>
      <img
        src="../../assets/areaCode/triangle_icon.png"
        class="area-code-icon"
      />
    </div>
    <!-- 区号选择弹框 -->
    <van-popup
      class="area-popup"
      v-model="showAreaCode"
      round
      position="bottom"
      :style="{ height: '60%' }"
    >
      <!-- 标题 -->
      <div class="code-header">
        请选择
        <img
          src="../../assets/areaCode/close.png"
          class="close-header"
          @click="openAreaCode(false)"
        />
      </div>
      <!-- 内容 -->
      <div class="code-content">
        <div
          class="area-code-item"
          v-for="item in areaCodeList"
          :key="item.nation_code + item.nation_name"
          @click="selectArea(item)"
        >
          <div class="area-code-left">
            <div class="area-code-icon">
              <i
                class="iconfont"
                :class="{
                  'icon-radio_select_icon icon-default-select theme-customize-font':
                    currentArea.nation_name === item.nation_name,
                  'icon-icon_Unselected icon-default-unSelect':
                    currentArea.nation_name !== item.nation_name,
                }"
              ></i>
            </div>
            <div class="area-code-name">{{ item.nation_name }}</div>
          </div>
          <div class="area-code-right">+{{ item.nation_code }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import areaCode from "./constant/areaCode.js";

export default {
  props: {
    currentArea: {
      type: Object,
      default: () => {
        return {
          nation_name: "中国",
          nation_code: "86",
        };
      },
    },
  },
  data() {
    return {
      showAreaCode: false,
      areaCodeList: areaCode,
    };
  },
  methods: {
    openAreaCode(val) {
      this.showAreaCode = val;
    },
    selectArea(item) {
      this.$emit('changeArea', item);
      this.openAreaCode(false)
    },
  },
};
</script>

<style lang="scss" scoped>
.area-popup::-webkit-scrollbar {
  display: none;
}
.area-popup {
  overflow-y: auto !important;
}
.areaCode-content {
  font-size: 0.28rem;

  .area-code {
    color: #333;
    display: flex;
    align-items: center;

    .area-code-icon {
      padding-left: 0.1rem;
      width: 0.32rem;
      height: 0.32rem;
    }
  }

  .code-header {
    font-weight: 500;
    font-size: 0.32rem;
    line-height: 0.96rem;
    text-align: center;
    position: sticky;
    top: 0;
    background: #fff;

    .close-header {
      position: absolute;
      right: 0.32rem;
      top: 0.32rem;
    }
  }

  .code-content {
    .area-code-item {
      height: 0.88rem;
      line-height: 0.88rem;
      border-bottom: 1px solid #f2f2f8;
      padding: 0 0.32rem;
      display: flex;
      font-size: 0.28rem;
      color: #333333;
      justify-content: space-between;

      .area-code-left {
        display: flex;

        .area-code-icon {
          margin-right: 0.32rem;

          .iconfont {
            font-size: 0.32rem;
          }
        }
      }
    }
  }
}
</style>
